<template>
  <div class="p-2 bg-white">
    <a-card :bordered="false" style="margin-bottom: 8px;">
      <a-row>
        <a-col :span="6">
          <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-form-item label="班组：">
              <a-select :options="orgList" v-model:value="orgCode" @change="orgChange" />
            </a-form-item>
          </a-form>
        </a-col>
      </a-row>
    </a-card>

    <div>
      <a-row>
        <a-col :span="8">
          <a-card :bordered="true" title="季度考核权重配置">
            <div class="infoArea">
              <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-form-item label="季度得分折算方式：">
                  <a-select class="formCol" :options="quarterOptions" v-model:value="formData.jiWayType" />
                </a-form-item>
                <a-form-item label="季度得分权重：">
                  <a-input-number class="formCol" :min="0" addon-after="%" v-model:value="formData.jiScoreWeight" />
                </a-form-item>
                <a-form-item label="综合评价权重：">
                  <a-input-number class="formCol" :min="0" addon-after="%" v-model:value="formData.jiEvaluateWeigh" />
                </a-form-item>
                <div class="my-2">
                  <a-col class="rule-row-title"> <span class="line-tags"></span>
                    <h3>月度加权折算 </h3>
                  </a-col>
                </div>
                <a-form-item label="季度中第一个月份权重">
                  <a-input-number class="formCol" :min="0" addon-after="%" v-model:value="formData.jiWeight1" :disabled="formData.jiWayType !== '3'" />
                </a-form-item>
                <a-form-item label="季度中第二个月份权重">
                  <a-input-number class="formCol" :min="0" addon-after="%" v-model:value="formData.jiWeight2" :disabled="formData.jiWayType !== '3'" />
                </a-form-item>
                <a-form-item label="季度中第三个月份权重">
                  <a-input-number class="formCol" :min="0" addon-after="%" v-model:value="formData.jiWeight3" :disabled="formData.jiWayType !== '3'" />
                </a-form-item>
              </a-form>
            </div>
          </a-card>
        </a-col>
        <a-col :span="8">
          <a-card :bordered="true" title="年度考核权重配置">
            <div class="infoArea">
              <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-form-item label="年度得分折算方式：">
                  <a-select class="formCol" :options="yearOptions" v-model:value="formData.yearWayType" />
                </a-form-item>
                <a-form-item label="年度得分权重：">
                  <a-input-number class="formCol" :min="0" addon-after="%" v-model:value="formData.yearScoreWeight" />
                </a-form-item>
                <a-form-item label="综合评价权重：">
                  <a-input-number class="formCol" :min="0" addon-after="%" v-model:value="formData.yearEvaluateWeigh" />
                </a-form-item>
                <div class="my-2">
                  <a-col class="rule-row-title"> <span class="line-tags"></span>
                    <h3>季度加权折算 </h3>
                  </a-col>
                </div>
                <a-form-item label="年度中第一个季度权重">
                  <a-input-number class="formCol" :min="0" addon-after="%" v-model:value="formData.yearWeight1" :disabled="formData.yearWayType !== '3'" />
                </a-form-item>
                <a-form-item label="年度中第二个季度权重">
                  <a-input-number class="formCol" :min="0" addon-after="%" v-model:value="formData.yearWeight2" :disabled="formData.yearWayType !== '3'" />
                </a-form-item>
                <a-form-item label="年度中第三个季度权重">
                  <a-input-number class="formCol" :min="0" addon-after="%" v-model:value="formData.yearWeight3" :disabled="formData.yearWayType !== '3'" />
                </a-form-item>
                <a-form-item label="年度中第四个季度权重">
                  <a-input-number class="formCol" :min="0" addon-after="%" v-model:value="formData.yearWeight4" :disabled="formData.yearWayType !== '3'" />
                </a-form-item>
              </a-form>
            </div>
          </a-card>
        </a-col>
        <a-col :span="8">
          <a-card :bordered="true" title="k值维护">
            <div class="infoArea">
              <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-form-item label="k值：">
                  <a-input-number class="formCol" :min="0" v-model:value="formData.k" @change="computeK" />
                </a-form-item>
                <a-form-item label="调节系数:">
                  <a-input-number class="formCol" :min="0" v-model:value="formData.adjustK" disabled />
                </a-form-item>
              </a-form>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>
    <div class="panel">
      <!-- <div class="panel-title">班组</div> -->
      <a-row>
        <a-col>
          <a-form>
            <a-form-item :wrapper-col="{ span: 24, offset: 11 }">
              <a-button type="primary" @click="handleSave">保存</a-button>
              <a-button @click="getData" style="margin-left: 10px">取消</a-button>
            </a-form-item>
          </a-form>
        </a-col>
      </a-row>
    </div>
  </div>
</template>
<script lang="ts" name="emp-hubBaseConfig" setup>
import { ref, onMounted, reactive, watch, } from 'vue';
import { list, deleteOne, saveOrUpdate, getByOrgCode } from './HubBaseConfigApi';
import { useMessage } from '/@/hooks/web/useMessage';
const { createMessage: $message } = useMessage();
import { unifyNumber, numSub } from '/@/views/zhc/util/numUtils';
import { useUserStore } from '/@/store/modules/user';
const userStore = useUserStore();
const queryParam = reactive<any>({});

const labelCol = reactive({ span: 6 });
const wrapperCol = reactive({ span: 18 });

const orgList = ref<[] | null>([]);

//下拉框数据
let quarterOptions = [
  {
    label: '月度分值累计折算',
    value: '1',
  },
  {
    label: '月度平均分折算',
    value: '2',
  },
  {
    label: '月度加权折算',
    value: '3',
  },
];

let yearOptions = [
  {
    label: '季度分值累计折算',
    value: '1',
  },
  {
    label: '季度平均分折算',
    value: '2',
  },
  {
    label: '季度加权折算',
    value: '3',
  },
];

const orgCode = ref(userStore.getOrgCode);
const orgName = ref('');
const formData = ref(
  {
    "id": null,
    "k": null,
    "adjustK": null as number | null,
    "jiWayType": null,
    "jiScoreWeight": null,
    "jiEvaluateWeigh": null,
    "jiWeight1": null,
    "jiWeight2": null,
    "jiWeight3": null,
    "jiWeight4": null,
    "yearWayType": null,
    "yearScoreWeight": null,
    "yearEvaluateWeigh": null,
    "yearWeight1": null,
    "yearWeight2": null,
    "yearWeight3": null,
    "yearWeight4": null,
  }
);

//监控
// watch(
//   () => formData.value.jiWayType,
//   (v) => {
//     $message.info('orgName改变了......');
//   }
// );

//初始化
onMounted(async () => {
  await initTeamSelect();
  getData();
});


async function initTeamSelect() {
  orgList.value = await userStore.getTeamList;
}

//班组下拉框切换
function orgChange(e, option) {
  $message.info('orgName改变了......' +e);
  orgName.value = option.label;
  getData();
}

//获取数据
async function getData() {
  formData.value = await getByOrgCode({ orgCode: orgCode.value }) || {};
}

//k值计算
function computeK(val) {
  // $message.info('k值改变了......' + val);
  if (val <= 0 || val >= 1) {
    $message.warning('K值需在0~1之间（不包括0和1）');
    formData.value.k = null;
    return;
  }
  //计算调节系数
  if (val) {
    formData.value.adjustK = numSub(1, val);
  } else {
    formData.value.adjustK = null;
  }
}

//保存数据
async function handleSave() {
  let params = {
    ...formData.value,
    orgCode: orgCode.value,
    orgName: orgName.value,
  }
  await saveOrUpdate(params, formData.value.id);
  getData();
}
</script>

<style scoped lang="less">
.formCol {
  width: 60%;
}

.infoArea {
  height: 450px;
}

.rule-row-title {
  padding-top: 24px;
  display: flex;
  align-items: center;
}

.line-tags {
  display: inline-block;
  width: 8px;
  height: 24px;
  background: #009688;
  margin-right: 8px;
  border-radius: 18%;
}
</style>